<template>
  <div class="container">
    <div class="left-pane">
      <!-- 左侧内容 -->
      <div style="font-size: 20px; font-weight: bold; padding: 10px;">物品分类</div>
      <div class="products">
        <el-button
          class="goods"
          :class="{ active: activeTab === 'products' }"
          @click="setActiveTab('products')"
        >产品</el-button>
      </div>
      <div class="ingredient">
        <el-button
          class="goods"
          :class="{ active: activeTab === 'ingredient' }"
          @click="setActiveTab('ingredient')"
        >配料</el-button>
      </div>
      <div class="wrap">
        <el-button
          class="goods"
          :class="{ active: activeTab === 'wrap' }"
          @click="setActiveTab('wrap')"
        >包装</el-button>
      </div>
    </div>
    <hr class="vertical-line">
    <div class="right-pane">
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <div>
          物品名称列表
        </div>
      </div>
      <div>
        <div v-if="activeTab === 'products'">
          <div class="right-but"><el-button
              class="add-button"
              @click="ProductsAddModal"
            >新增产品</el-button></div>
          <div class="yemian">
            <template>
              <el-container>
                <el-main>
                  <el-row
                    :gutter="20"
                    style="flex-wrap: wrap;"
                  >
                    <el-col
                      :span="8"
                      v-for="item in productsData"
                      :key="item.di_id"
                      class="nigger"
                    >
                      <el-card>
                        <div class="xuhao">{{ item.di_sort }} <span
                            class="del"
                            @click="productsDelete(item.di_id)">删除</span></div>

                        <div class="image-container">
                          <img :src="item.di_image" />
                        </div>
                        <div class="content">
                          <div>{{item.di_name}} <span class="upd" @click="productsUpd(item)">修改</span></div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </el-main>
              </el-container>
            </template>
          </div>
          <!-- 分页 -->
          <el-pagination class="pagination"
            @size-change="change1"
            @current-change="Ymchange1"
            :current-page="currentPage1"
            :page-sizes="[6]" 
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="rows1">
          </el-pagination>
          <!-- 产品添加模态框 -->
          <el-dialog
            title="添加"
            :visible.sync="ProductsAddVisible"
            width="400px"
            :close-on-click-modal="false"
            class="qw"
          >
            <el-form
              :model="Productsform"
              label-width="100px"
            >
              <el-form-item label="产品名称">
                <el-input
                  v-model="Productsform.di_name"
                  autocomplete="off"
                  placeholder="产品名称"
                  class="wenb"
                ></el-input>
              </el-form-item>

              <el-form-item label="图片上传">
                
                <el-upload
                class="upload-demo"
                action="https://localhost:7018/api/dict_image/UploadFile"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"

                :before-upload="beforeUpload"
                
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>

              </el-form-item>

            </el-form>
            <div>
              <span
                slot="footer"
                style="display: flex; justify-content: center;"
              >
                <el-button
                  @click="ProductsAddVisible = false"
                  style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;"
                >取消</el-button>
                <el-button
                  type="primary"
                  @click="ProductssubmitForm"
                  style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;"
                >确定</el-button>
              </span>
            </div>
          </el-dialog>

          <el-dialog
          title="修改"
          :visible.sync="ProductsEditVisible"
          width="400px"
          :close-on-click-modal="false"
          class="qw"
        >
          <el-form
            :model="ProductsEditform"
            label-width="100px"
          >
          <el-form-item label="产品编号">
            <el-input
              v-model="ProductsEditform.di_id"
              autocomplete="off"
              placeholder="产品编号"
              class="wenb"
              disabled
            ></el-input>
          </el-form-item>
            <el-form-item label="产品名称">
              <el-input
                v-model="ProductsEditform.di_name"
                autocomplete="off"
                placeholder="产品名称"
                class="wenb"
              ></el-input>
            </el-form-item>

            <el-form-item label="图片修改">
              <el-upload
              class="upload-demo"
              action="https://localhost:7018/api/dict_image/UploadFile"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :before-upload="beforeUpload"
              >
              <el-button size="small" type="primary" class="djsc">点击上传</el-button>
              <div slot="tip" class="el-upload__tip" >只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>

            </el-form-item>

          </el-form>
          <div>
            <span
              slot="footer"
              style="display: flex; justify-content: center;"
            >
              <el-button
                @click="ProductsEditVisible = false"
                style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;"
              >取消</el-button>
              <el-button
                type="primary"
                @click="ProductsEdit"
                style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;"
              >确定</el-button>
            </span>
          </div>
        </el-dialog>
        </div>
        <div v-if="activeTab === 'ingredient'">
          <!-- 显示新增配料按钮 -->
          <div class="right-but"><el-button
              class="add-button"
              @click="ingredientAddModal"
            >新增配料</el-button></div>
          <div class="yemian">
            <template>
              <el-container>
                <el-main>
                  <el-row
                    :gutter="20"
                    style="flex-wrap: wrap;"
                  >
                    <el-col
                      :span="8"
                      v-for="item in ingredientData"
                      :key="item.di_id"
                      class="nigger"
                    >
                      <el-card>
                        <div class="xuhao">{{ item.di_sort }} <span
                            class="del"
                            @click="ingredientDelete(item.di_id)"
                          >删除</span></div>

                        <div class="image-container">
                          <img :src="item.di_image" />
                        </div>
                        <div class="content">
                          <div>{{item.di_name}} <span class="upd" @click="ingredientUpd(item)">修改</span></div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </el-main>
              </el-container>
            </template>
          </div>

          <!-- 分页 -->
          <el-pagination class="pagination"
            @size-change="change2"
            @current-change="Ymchange2"
            :current-page="currentPage2"
            :page-sizes="[6]" 
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="rows2">
          </el-pagination>
           <!-- 配料添加模态框 -->
           <el-dialog
           title="添加"
           :visible.sync="IngredientAddVisible"
           width="400px"
           :close-on-click-modal="false"
           class="qw"
         >
           <el-form
             :model="Ingredientform"
             label-width="100px"
           >
             <el-form-item label="配料名称">
               <el-input
                 v-model="Ingredientform.di_name"
                 autocomplete="off"
                 placeholder="配料名称"
                 class="wenb"
               ></el-input>
             </el-form-item>

             <el-form-item label="图片上传">
               
               <el-upload
               class="upload-demo"
               action="https://localhost:7018/api/dict_image/UploadFile"
               :on-preview="handlePreview"
               :on-remove="handleRemove"
               :file-list="fileList"

               :before-upload="beforeUpload"
               
               >
                 <el-button size="small" type="primary">点击上传</el-button>
                 <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
               </el-upload>

             </el-form-item>

           </el-form>
           <div>
             <span
               slot="footer"
               style="display: flex; justify-content: center;"
             >
               <el-button
                 @click="IngredientAddVisible = false"
                 style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;"
               >取消</el-button>
               <el-button
                 type="primary"
                 @click="IngredientsubmitForm"
                 style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;"
               >确定</el-button>
             </span>
           </div>
         </el-dialog>

         <el-dialog
         title="修改"
         :visible.sync="IngredientEditVisible"
         width="400px"
         :close-on-click-modal="false"
         class="qw"
       >
         <el-form
           :model="IngredientEditform"
           label-width="100px"
         >
         <el-form-item label="配料编号">
           <el-input
             v-model="IngredientEditform.di_id"
             autocomplete="off"
             placeholder="配料编号"
             class="wenb"
             disabled
           ></el-input>
         </el-form-item>
           <el-form-item label="配料名称">
             <el-input
               v-model="IngredientEditform.di_name"
               autocomplete="off"
               placeholder="配料名称"
               class="wenb"
             ></el-input>
           </el-form-item>

           <el-form-item label="图片修改">
             <el-upload
             class="upload-demo"
             action="https://localhost:7018/api/dict_image/UploadFile"
             :on-preview="handlePreview"
             :on-remove="handleRemove"
             :file-list="fileList"
             :before-upload="beforeUpload"
             >
             <el-button size="small" type="primary" class="djsc">点击上传</el-button>
             <div slot="tip" class="el-upload__tip" >只能上传jpg/png文件，且不超过500kb</div>
           </el-upload>

           </el-form-item>

         </el-form>
         <div>
           <span
             slot="footer"
             style="display: flex; justify-content: center;"
           >
             <el-button
               @click="IngredientEditVisible = false"
               style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;"
             >取消</el-button>
             <el-button
               type="primary"
               @click="IngredientEdit"
               style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;"
             >确定</el-button>
           </span>
         </div>
       </el-dialog>

        </div>
        <div v-if="activeTab === 'wrap'">
          <!-- 显示新增包装按钮 -->
          <div class="right-but"><el-button
              class="add-button"
              @click="wrapAddModal"
            >新增包装</el-button></div>
          <div class="yemian">
            <template>
              <el-container>
                <el-main>
                  <el-row
                    :gutter="20"
                    style="flex-wrap: wrap;"
                  >
                    <el-col
                      :span="8"
                      v-for="item in wrapData"
                      :key="item.di_id"
                      class="nigger"
                    >
                      <el-card>
                        <div class="xuhao">{{ item.di_sort }} <span
                            class="del"
                            @click="wrapDelete(item.di_id)"
                          >删除</span></div>

                        <div class="image-container">
                          <img :src="item.di_image" />
                        </div>
                        <div class="content">
                          <div>{{item.di_name}} <span class="upd" @click="wrapUpd(item)">修改</span></div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </el-main>
              </el-container>
            </template>
          </div>
          <!-- 分页 -->
          <el-pagination class="pagination"
            @size-change="change3"
            @current-change="Ymchange3"
            :current-page="currentPage3"
            :page-sizes="[6]" 
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="rows3">
          </el-pagination>
          <!-- 包装添加模态框 -->
          <el-dialog
          title="添加"
          :visible.sync="WrapAddVisible"
          width="400px"
          :close-on-click-modal="false"
          class="qw"
        >
          <el-form
            :model="Wrapform"
            label-width="100px"
          >
            <el-form-item label="包装名称">
              <el-input
                v-model="Wrapform.di_name"
                autocomplete="off"
                placeholder="包装名称"
                class="wenb"
              ></el-input>
            </el-form-item>

            <el-form-item label="图片上传">
              
              <el-upload
              class="upload-demo"
              action="https://localhost:7018/api/dict_image/UploadFile"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"

              :before-upload="beforeUpload"
              
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>

            </el-form-item>

          </el-form>
          <div>
            <span
              slot="footer"
              style="display: flex; justify-content: center;"
            >
              <el-button
                @click="WrapAddVisible = false"
                style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;"
              >取消</el-button>
              <el-button
                type="primary"
                @click="WrapsubmitForm"
                style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;"
              >确定</el-button>
            </span>
          </div>
        </el-dialog>

        <el-dialog
         title="修改"
         :visible.sync="WrapEditVisible"
         width="400px"
         :close-on-click-modal="false"
         class="qw"
       >
         <el-form
           :model="WrapEditform"
           label-width="100px"
         >
         <el-form-item label="包装编号">
           <el-input
             v-model="WrapEditform.di_id"
             autocomplete="off"
             placeholder="包装编号"
             class="wenb"
             disabled
           ></el-input>
         </el-form-item>
           <el-form-item label="包装名称">
             <el-input
               v-model="WrapEditform.di_name"
               autocomplete="off"
               placeholder="包装名称"
               class="wenb"
             ></el-input>
           </el-form-item>

           <el-form-item label="图片修改">
             <el-upload
             class="upload-demo"
             action="https://localhost:7018/api/dict_image/UploadFile"
             :on-preview="handlePreview"
             :on-remove="handleRemove"
             :file-list="fileList"
             :before-upload="beforeUpload"
             >
             <el-button size="small" type="primary" class="djsc">点击上传</el-button>
             <div slot="tip" class="el-upload__tip" >只能上传jpg/png文件，且不超过500kb</div>
           </el-upload>

           </el-form-item>

         </el-form>
         <div>
           <span
             slot="footer"
             style="display: flex; justify-content: center;"
           >
             <el-button
               @click="WrapEditVisible = false"
               style="margin-right: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;"
             >取消</el-button>
             <el-button
               type="primary"
               @click="WrapEdit"
               style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;"
             >确定</el-button>
           </span>
         </div>
       </el-dialog>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>
  
  <script>
import $http from '@/routers/base';
import axios from "axios";
import { MessageBox } from "element-ui";
export default {
  data() {
    return {
      activeTab: "products",
      productsData: [],
      ingredientData:[],
      wrapData:[],
      ProductsAddVisible: false,
      ProductsEditVisible:false,
      IngredientAddVisible:false,
      IngredientEditVisible:false,
      WrapAddVisible:false,
      WrapEditVisible:false,
      currentPage1: 1, //
      currentPage2: 1, //当前页
      currentPage3:1,
      pageSize: 6, //每页显示数
      rows1: 0, //总行数
      rows2: 0, //总行数
      rows3: 0, //总行数
      fileList: [], 
      Pimage:"", 
      Productsform: {
        di_name: "",
        di_image: "",
        
      },

      ProductsEditform:{
        di_id:"",
        di_name:"",
        di_image:"",
      },
      Ingredientform: {
        di_name: "",
        di_image: "",
        
      },
      IngredientEditform:{
        di_id:"",
        di_name:"",
        di_image:"",
      },
      Wrapform:{
        di_name: "",
        di_image: "",
      },
      WrapEditform:{
        di_id:"",
        di_name:"",
        di_image:"",
      }
    };
  },
  methods: {
    setActiveTab(tab) {
      this.activeTab = tab;
    },
    //产品查询
    async getProducts() {
      const response = await  $http.get(
        "dict_image/Queryproducts"
      );
      this.productsData = response;
      console.log(this.productsData);
    },
    //产品删除
    async productsDelete(di_id) {
      // 在这里执行点击删除按钮后的操作，例如移除相关的列表项或发送删除请求
      console.log("点击了删除按钮");
      // 可以添加您的其他逻辑代码
      console.log(di_id);
      MessageBox.confirm("确认删除删除该条记录吗？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $http
            .delete(
              `dict_image/productsDelete/${di_id}`
            )
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功！",
              });
              this.getProducts();
            })
            .catch((error) => {
              this.$message.error("删除失败：" + error.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "管理员取消了删除,删除无效哦！",
          });
        });
    },
    showAddModal() {
      // 实现显示新增模态框的逻辑
      console.log("显示新增模态框");
    },
    ProductsAddModal() {
      this.ProductsAddVisible = true;
    },
    //图片上传
    handlePreview(file) {
      
      console.log('上传成功后的文件地址:'+file);
    },
    handleRemove(file, fileList) {
      console.log(file);
      console.log(fileList);
      
    },
    
    beforeUpload(file) {
      
      console.log(file);
      //nigger.name="../Images/"+nigger.name;
    // 检查文件类型和大小  
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';  
    const isLt500KB = file.size / 1024 < 500;  
    
    if (!isJPG) {  
        this.$message.error('上传图片只能是 JPG/PNG 格式!');  
        return false;  
    }  
    if (!isLt500KB) {  
        this.$message.error('上传图片大小不能超过 500KB!');  
        return false;  
    }  
    
    // 如果fileList不为空，则替换最后一个文件
    if (this.fileList.length > 0) {
        this.fileList.splice(this.fileList.length - 1, 1, file); // 替换最后一个文件
        
    } else {
        this.fileList.push(file); // 否则添加新的文件
        
    }

    // this.ProductsEditform.type="image/png";
    this.Pimage = file.name;  
    this.ProductsEditform.di_image = "../Images/" + this.Pimage;  
    this.IngredientEditform.di_image="../Images/"+this.Pimage;
    this.WrapEditform.di_image="../Images/"+this.Pimage;
    return true;  
},
    
    //产品添加
    async ProductssubmitForm() {
      if (this.submitProductsForm()) {
        $http
          .post("dict_image/productsAdd", {
            di_name: this.Productsform.di_name,
            di_sort: 0,
            di_type: "产品",
            di_image: "../Images/"+this.Pimage,
            di_code:"",
            isDeleted: false,
          })
          .then((response) => {
            if (response) {
              this.ProductsAddVisible = false;
              this.getProducts();
              this.$message.success("添加成功！");
              this.Productsform.di_name = "";
              this.Productsform.di_image = null;
              this.fileList = [];
            } else {
              console.log("新增客户数据：", response.data);
            }
          })
          .catch((error) => {
            this.$message.error("添加失败：" + error.message);
          });
      }
    },
    //获取产品数据
    productsUpd(item){
       this.$set(this.ProductsEditform, 'di_id', item.di_id);
       this.$set(this.ProductsEditform, 'di_code', item.di_code);
       this.$set(this.ProductsEditform, 'di_name', item.di_name);
       this.$set(this.ProductsEditform, 'di_sort', item.di_sort);
       this.$set(this.ProductsEditform, 'di_type', item.di_type);
       //this.$set(this.ProductsEditform, 'di_image', item.di_image);
      // 如果 fileList 是空的或者你想替换整个列表，你可以这样做：  
       this.fileList = [{ url: item.di_image, name: 'di_image' }];  
        // 如果你只想更新或添加一个特定的图片，你可能需要遍历 fileList 并找到或添加它：  
      console.log(item.di_image);
      this.$set(this.ProductsEditform, 'isDeleted', item.isDeleted);
      this.ProductsEditVisible = true;
    },
    //产品修改
    async ProductsEdit() {
      if (this.ProductsEditForm()) {
        $http.put('dict_image/productsUpdate', this.ProductsEditform)
          .then(response => {
            if (response) {
              this.$message.success('修改成功！');
              this.ProductsEditVisible = false;
              this.getProducts();
            } else {
              this.$message.error('修改失败！请重试！');
            }
          }).catch(error => {
            this.$message.error('修改失败：' + error.message);
          })
      }
    },

    //添加产品非空判断
    submitProductsForm() {
      return this.Productsform.di_name.trim() != "";
    },
    //修改产品非空判断
    ProductsEditForm(){
      return this.ProductsEditform.di_name.trim() != "";
    },

    //添加配料非空判断
    submitIngredientForm() {
      return this.Ingredientform.di_name.trim() != "";
    },
    //修改配料非空判断
    IngredientEditForm(){
      return this.IngredientEditform.di_name.trim() != "";
    },
    //添加包装非空判断
    submitWrapForm(){
      return this.Wrapform.di_name.trim() != "";
    },
     //修改包装非空判断
     WrapEditForm(){
      return this.WrapEditform.di_name.trim() != "";
    },

     //配料查询
     async getIngredient() {
      const response = await  $http.get(
        "dict_image/Queryingredient"
      );
      this.ingredientData = response.data;
      console.log(this.ingredientData);
    },
    ingredientAddModal(){
      this.IngredientAddVisible = true;
    },
    //配料添加
    async IngredientsubmitForm() {
      if (this.submitIngredientForm()) {
        $http
          .post("dict_image/ingredientAdd", {
            di_name: this.Ingredientform.di_name,
            di_sort: 0,
            di_type: "配料",
            di_code:"",
            di_image: "../Images/"+this.Pimage,
            isDeleted: false,
          })
          .then((response) => {
            if (response) {
              this.IngredientAddVisible = false;
              this.getIngredient();
              this.$message.success("添加成功！");
              this.Ingredientform.di_name = "";
              this.Ingredientform.di_image = null;
              this.fileList = [];
            } else {
              console.log("新增客户数据：", response.data);
            }
          })
          .catch((error) => {
            this.$message.error("添加失败：" + error.message);
          });
      }
    },
    ingredientUpd(item){
      this.$set(this.IngredientEditform, 'di_id', item.di_id);
       this.$set(this.IngredientEditform, 'di_code', item.di_code);
       this.$set(this.IngredientEditform, 'di_name', item.di_name);
       this.$set(this.IngredientEditform, 'di_sort', item.di_sort);
       this.$set(this.IngredientEditform, 'di_type', item.di_type);
       //this.$set(this.IngredientEditform, 'di_image', item.di_image);
      // 如果 fileList 是空的或者你想替换整个列表，你可以这样做：  
       this.fileList = [{ url: item.di_image, name: 'di_image' }];  
        // 如果你只想更新或添加一个特定的图片，你可能需要遍历 fileList 并找到或添加它：  
      console.log(item.di_image);
      this.$set(this.IngredientEditform, 'isDeleted', item.isDeleted);
      this.IngredientEditVisible = true;
    },
    async IngredientEdit(){
      if (this.IngredientEditForm()) {
        $http.put('dict_image/ingredientUpdate', this.IngredientEditform)
          .then(response => {
            if (response) {
              this.$message.success('修改成功！');
              this.IngredientEditVisible = false;
              this.getIngredient();
            } else {
              this.$message.error('修改失败！请重试！');
            }
          }).catch(error => {
            this.$message.error('修改失败：' + error.message);
          })
      }
    },

    //产品删除
    async ingredientDelete(di_id) {
      // 在这里执行点击删除按钮后的操作，例如移除相关的列表项或发送删除请求
      console.log("点击了删除按钮");
      // 可以添加您的其他逻辑代码
      console.log(di_id);
      MessageBox.confirm("确认删除删除该条记录吗？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $http
            .delete(
              `dict_image/ingredientDelete/${di_id}`
            )
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功！",
              });
              this.getIngredient();
            })
            .catch((error) => {
              this.$message.error("删除失败：" + error.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "管理员取消了删除,删除无效哦！",
          });
        });
    },
    //包装查询
    async getWrap() {
      const response = await  $http.get(
        "dict_image/Querywrap"
      );
      this.wrapData = response;
      console.log(this.wrapData);
    },
    wrapAddModal(){
      this.WrapAddVisible = true;
    },
    //包装添加
    async WrapsubmitForm(){
      if (this.submitWrapForm()) {
        $http
          .post("dict_image/wrapAdd", {
            di_name: this.Wrapform.di_name,
            di_sort: 0,
            di_type: "包装",
            di_code:"",
            di_image: "../Images/"+this.Pimage,
            isDeleted: false,
          })
          .then((response) => {
            if (response) {
              this.WrapAddVisible = false;
              this.getWrap();
              this.$message.success("添加成功！");
              this.Wrapform.di_name = "";
              this.Wrapform.di_image = null;
              this.fileList = [];
            } else {
              console.log("新增客户数据：", response);
            }
          })
          .catch((error) => {
            this.$message.error("添加失败：" + error.message);
          });
      }
    },
    

    wrapUpd(item){
      this.$set(this.WrapEditform, 'di_id', item.di_id);
       this.$set(this.WrapEditform, 'di_code', item.di_code);
       this.$set(this.WrapEditform, 'di_name', item.di_name);
       this.$set(this.WrapEditform, 'di_sort', item.di_sort);
       this.$set(this.WrapEditform, 'di_type', item.di_type);
       //this.$set(this.WrapEditform, 'di_image', item.di_image);
      // 如果 fileList 是空的或者你想替换整个列表，你可以这样做：  
       this.fileList = [{ url: item.di_image, name: 'di_image' }];  
        // 如果你只想更新或添加一个特定的图片，你可能需要遍历 fileList 并找到或添加它：  
      console.log(item.di_image);
      this.$set(this.WrapEditform, 'isDeleted', item.isDeleted);
      this.WrapEditVisible = true;
    },
    async WrapEdit(){
      if (this.WrapEditForm()) {
        $http.put('dict_image/wrapUpdate', this.WrapEditform)
          .then(response => {
            if (response) {
              this.$message.success('修改成功！');
              this.WrapEditVisible = false;
              this.getWrap();
            } else {
              this.$message.error('修改失败！请重试！');
            }
          }).catch(error => {
            this.$message.error('修改失败：' + error.message);
          })
      }
    },
    //产品删除
    async wrapDelete(di_id) {
      // 在这里执行点击删除按钮后的操作，例如移除相关的列表项或发送删除请求
      console.log("点击了删除按钮");
      // 可以添加您的其他逻辑代码
      console.log(di_id);
      MessageBox.confirm("确认删除删除该条记录吗？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $http
            .delete(
              `dict_image/wrapDelete/${di_id}`
            )
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功！",
              });
              this.getWrap();
            })
            .catch((error) => {
              this.$message.error("删除失败：" + error.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "管理员取消了删除,删除无效哦！",
          });
        });
    },
    //产品分页
     getProducts() {
          this.where="di_type='产品'";
      // 向后端请求数据，并更新客户数据和总条数
      $http.get('dict_image/getProductsFenYe', {
        params: {
          currentPage: this.currentPage1,
          pageSize: this.pageSize,
          where:this.where
       }
     }).then(res => {
            this.productsData =res.productsData;
            this.rows1=res.rows;
     }).catch(error => {
        console.error('Error fetching client data: ', error);
     });
    },
     change1: function(size) {
      this.pageSize = size;
      this.currentPage1 = 1;
      this.getProducts();
    },
    Ymchange1: function(page) {
      this.currentPage1 = page;
      this.getProducts();
    },
     //配料分页
      getIngredient() {
          this.where="di_type='配料'";
      // 向后端请求数据，并更新客户数据和总条数
      $http.get('dict_image/getIngredientFenYe', {
        params: {
          currentPage: this.currentPage2,
          pageSize: this.pageSize,
          where:this.where
       }
     }).then(res => {
            this.ingredientData =res.ingredientData;
            this.rows2=res.rows;
     }).catch(error => {
        console.error('Error fetching client data: ', error);
     });
    },
     change2: function(size) {
      this.pageSize = size;
      this.currentPage2 = 1;
      this.getIngredient();
    },
    Ymchange2: function(page) {
      this.currentPage2 = page;
      this.getIngredient();
    },
    //包装分页
    getWrap() {
          this.where="di_type='包装'";
      // 向后端请求数据，并更新客户数据和总条数
      $http.get('dict_image/getWrapFenYe', {
        params: {
          currentPage: this.currentPage3,
          pageSize: this.pageSize,
          where:this.where
       }
     }).then(res => {
            this.wrapData =res.wrapData;
            this.rows3=res.rows;
     }).catch(error => {
        console.error('Error fetching client data: ', error);
     });
    },
     change3: function(size) {
      this.pageSize = size;
      this.currentPage3 = 1;
      this.getWrap();
    },
    Ymchange3: function(page) {
      this.currentPage3 = page;
      this.getWrap();
    },
   
  },
  mounted() {
    this.getProducts();
    this.getIngredient();
    this.getWrap();
  },
};
</script>
  
  <style scoped>
.nigger {
  width: 18vw;
  height: 33vh;
}

.container {
  display: flex;
}

.left-pane {
  flex: 15%;
}

.right-pane {
  flex: 85%;
  padding: 10px;
}

.vertical-line {
  border-left: 2px solid black;
  height: 700px;
  margin: 20px;
}

.products {
  width: 150px;
}

.ingredient {
  width: 150px;
}

.wrap {
  width: 150px;
}

.goods {
  width: 100%;
  padding: 15px;
  margin: 10px -10px 5px 10px;
  background-color: rgba(252, 252, 252, 1);
  color: #999999;
}

.goods:hover {
  color: rgb(26, 188, 156);
  background-color: #ffffff;
}

.goods:focus {
  color: #ffffff;
  background-color: #1abc9c;
}

.container-query {
  margin: 10px;
}
.right-but {
  float: right;
  bottom: 0;
}
.yemian {
  clear: both;
}
.image-container {
  text-align: center;
  padding: 20px;
}

.image-container img {
  max-width: 100%;
  width: 80%;
  height: 80%;
}
.del {
  float: right;
  font-size: 12px;
}

.content {
  text-align: center;
  padding: 10px;
}
.upd {
  float: right;
  font-size: 14px;
}
.upd:hover {
  cursor: pointer;
}
.del:hover {
  cursor: pointer;
}
.wenb{
  width: 220px;
}
</style>